<template>
	<div>
		<div class="overlay nav-btm">
			<div class="overlay-content scrolling">
				<div class="head">
					<a @click="$router.back(-1)" class="return"></a>
				</div>
				<div class="pay">
					<div class="pay_top">
						<div class="pay_status">
							<div class="status_title">
								<img src="../assets/images/prepayment-1.png" width="30" />
								<span style="color: rgb(133, 141, 172);" v-if="list.status == 1">订单已取消</span>
								<span style="color: #47AA69;" v-if="list.status == 2">待付款</span>
								<span style="color: rgb(133, 141, 172);" v-if="list.status == 3">已付款</span>
								<span style="color: #47AA69;" v-if="list.status == 4">订单申诉中</span>
								<span style="color: rgb(133, 141, 172);" v-if="list.status == 5">确认已收款</span>
								<span style="color: rgb(133, 141, 172);" v-if="list.status == 6">已仲裁</span>
								<div style="margin-right: 100px;" v-if="list.userName == personal.userName">
									<a :href="'tel:' + list.otcUserName" style="color: white;">
										<van-icon name="phone-o" size="25" style="top: 5px!important;right: 100px;" />
										<div style="font-size: 12px;text-align: right;">电话</div>
									</a>
								</div>
								<div style="margin-right: 100px;" v-if="list.userName != personal.userName">
									<a :href="'tel:' + list.userName" style="color: white;">
										<van-icon name="phone-o" size="25" style="top: 5px!important;right: 100px;" />
										<div style="font-size: 12px;text-align: right;">电话</div>
									</a>
								</div>
								<div style="margin-right: 30px;">
									<van-icon name="smile-comment-o" size="25" style="top: 5px!important;right: 30px;" @click.native="getTel" />
									<div style="font-size: 12px;text-align: right;margin-top: -18px;margin-right: -11px;" @click.native="getTel">联系对方</div>
								</div>
							</div>
							<div class="status_content">
								<span v-if="list.status != 1 || list.status != 5 || list.status != 6">预计在 <span v-text="String(list.pastDue).slice(11,19)"></span> 内收到买家付款</span>
							</div>
						</div>
						<div class="pay_content">
							<div class="content_count">
								<span>&yen; <span v-text="Number(list.unitPrice * list.numberDeals).toFixed(2)"></span></span>
							</div>
							<div class="content_price">
								<span>单价</span><span class="ml20">&yen; <span v-text="list.unitPrice"></span></span>
							</div>
							<div class="content_num">
								<span>数量</span><span class="ml20" v-text="Number(list.numberDeals).toFixed(2) + ' AIDT'">54684.254674 AIDT</span>
							</div>
							<div class="content_img">
								<div>
									<img src="../assets/images/prepayment-2.png" width="40" />
								</div>
								<div>
									<span>AIDT</span>
								</div>
							</div>
						</div>
					</div>
					<div class="pay_btm">
						<div class="pay_order">
							<div class="order_title">
								<span>订单信息</span>
							</div>
							<div class="order_count">
								<div v-if="centerType != 1">
									<span class="count_title">代理商昵称:</span>
									<span class="count_content" v-text="list.otcName">豆豆网络科技</span>
								</div>
								<div>
									<span class="count_title" v-if="centerType != 1">代理商UUID:</span>
									<span class="count_title" v-if="centerType == 1">用户UUID:</span>
									<span class="count_content" v-if="centerType != 1" v-text="list.otcUserUuid">1234565554</span>
									<span class="count_content" v-if="centerType == 1" v-text="list.userUuid">1234565554</span>
									<span class="copy" v-if="centerType != 1" @click="copyLink(1)">复制</span>
									<span class="copy" v-if="centerType == 1" @click="copyLink(6)">复制</span>
								</div>
								<div>
									<span class="count_title">订单编号:</span>
									<span class="count_content" v-text="list.detailNum">1234567325458</span>
									<span class="copy" @click="copyLink(2)">复制</span>
								</div>
							</div>
						</div>
						<div class="pay_way">
							<div v-if="(list.status == 2 && list.typeId == 0 && centerType != 1) || (list.status == 2 && list.typeId == 1 && centerType == 1)">
								<div class="way_title">
									<span>选择以下方式支付</span>
								</div>
								<div v-if="list.status == 2" style="text-align: center;padding-top: 20px;padding-bottom: 20px;">
									<van-row>
										<div v-for="item in list2" :key="item.id">
											<van-col span="8" @click.native="showPay(0,item.qrcode)" v-if="item.type == 1">
												<img src="../assets/images/prepayment-3.png" width="45" />
											</van-col>
											<van-col span="8" @click.native="showPay(1,item.qrcode)" v-if="item.type == 2">
												<img src="../assets/images/prepayment-4.png" width="45" />
											</van-col>
											<van-col span="8" @click.native="showPay(2,item)" v-if="item.type == 0">
												<img src="../assets/images/prepayment-5.png" width="45" />
											</van-col>
										</div>
									</van-row>
								</div>
							</div>
							<div align="center" style="padding: 10px 0px;color: rgb(71, 170, 105);background: #2C3145;" v-if="(list.status == 2 && list.typeId == 0 && centerType == 1) || (list.status == 2 && list.typeId != 0 && centerType != 1)">
								等待对方付款
							</div>
							<div align="center" style="padding: 10px 0px;color: rgb(71, 170, 105);background: #2C3145;" v-if="list.status == 6">
								<span>仲裁结果：</span>
								<span v-text="list.appealDescription"></span>
							</div>
							<div align="center" style="padding: 10px 0px;color: rgb(71, 170, 105);background: #2C3145;" v-if="(list.status == 3 && list.typeId == 1 && centerType != 1) || (list.status == 3 && list.typeId == 0 && centerType == 1)">
								该订单已付款
							</div>
							<div v-if="(list.status == 3 && list.typeId == 0 && centerType != 1) || (list.status == 3 && list.typeId == 1 && centerType == 1)" @click="ToUp" align="center" style="padding: 10px 0px;color: rgb(71, 170, 105);background: #2C3145;">
								您已支付过当前订单
							</div>
							<div v-if="sh == 2 || sh == 3" align="center" style="padding: 10px 0px;color: rgb(71, 170, 105);background: #2C3145;">
								对方已提交申诉
							</div>
							<div v-if="sh == 1 || sh == 3" align="center" style="padding: 10px 0px;color: rgb(71, 170, 105);background: #2C3145;">
								您已提交申诉
							</div>
						</div>
					</div>
				</div>
				<van-popup v-model="show" style="width:80%;border-radius: 10px;background: transparent;">
					<div class="pay_pay">
						<div class="pay_title" v-text="payTile"></div>
						<div class="pay_wx" v-show="payTile == tiles[0] || payTile == tiles[1]">
							<van-icon name="close" @click="clShow" />
							<div class="wx_title" v-show="payTile == tiles[0]">注：请扫描微信付款码进行支付</div>
							<div class="wx_title" v-show="payTile == tiles[1]">注：请扫描支付宝付款码进行支付</div>
							<div class="wx_code">
								<img :src="img" width="80%" />
							</div>
							<div style="padding-bottom: 10px;font-size: 13px;color: #FA4A61;text-align: left;padding-left: 40px;padding-right: 40px;">
								<span>付款备注：</span>
								<span v-text="list.remark"></span>
								<span @click="copyLink(4)" style="float: right;color: #3fb776;">复制</span>
							</div>
						</div>
						<div class="pay_bank" v-show="payTile == tiles[2]">
							<van-icon name="close" @click="clShow" />
							<div class="bank_count">
								<div class="count_title">账户名：</div>
								<span class="count_content" v-text="img.trueName">李某某</span>
								<span @click="copyLink(5)" style="float: right;color: #3fb776;">复制</span>
							</div>
							<div class="bank_count">
								<div class="count_title">开户行：</div>
								<span class="count_content" v-text="img.bankName + ' ' + img.bankBranch">李某某</span>
								<span @click="copyLink(5)" style="float: right;color: #3fb776;">复制</span>
							</div>
							<div class="bank_count">
								<div class="count_title">账号：</div>
								<div class="count_content">
									<span v-text="img.card">12345678971325468533</span>
									<div class="count_copy" @click="copyLink(3)">复制</div>
								</div>
							</div>
							<div class="bank_ps">注：请使用银行卡进行转账支付</div>
							<div style="padding-bottom: 20px;font-size: 13px;color: #FA4A61;padding-top: 10px;">
								<span>付款备注：</span>
								<span v-text="list.remark"></span>
								<span @click="copyLink(4)" style="float: right;color: #3fb776;">复制</span>
							</div>
						</div>
					</div>
				</van-popup>
			</div>
		</div>
		<div v-if="((list.status == 3 || list.status == 4) && list.typeId == 0 && centerType != 1 && !(sh == 1 || sh == 3)) || ((list.status == 3 || list.status == 4) && list.typeId == 1 && centerType == 1 && !(sh == 1 || sh == 3))" @click="ToUp" align="center" style="text-align: center;background-color: #24293e;color: rgb(71, 170, 105);font-size: 16px;width: 100%;padding: 15px 0;position: fixed;bottom: 0;">
			投诉
		</div>
		<div v-if="(list.status == 2 && list.typeId == 0 && centerType != 1) || (list.status == 2 && list.typeId == 1 && centerType == 1)" align="center" style="text-align: center;background-color: #24293e;color: rgb(71, 170, 105);font-size: 16px;width: 100%;padding: 15px 0;position: fixed;bottom: 0;">
			<van-row>
				<van-col span="12" style="color: white;border-right: 1px solid #4c536a;" @click.native="quitType">取消订单</van-col>
				<van-col span="12" @click.native="closeType">确认已付款</van-col>
			</van-row>
		</div>
		<div v-if="((list.status == 3 || list.status == 4) && list.typeId == 1 && centerType != 1) || ((list.status == 3 || list.status == 4) && list.typeId == 0 && centerType == 1) && !(sh == 1 || sh == 3)" align="center" style="text-align: center;background-color: #24293e;color: rgb(71, 170, 105);font-size: 16px;width: 100%;padding: 15px 0;position: fixed;bottom: 0;">
			<van-row>
				<van-col span="12" style="color: white;border-right: 1px solid #4c536a;" @click.native="ToUp">投诉</van-col>
				<van-col span="12" @click.native="closeType2">确认已收款</van-col>
			</van-row>
		</div>
		<div>
			<div id="copyText" v-text="copyText" style="color: transparent;background-color: transparent;position: absolute;z-index: 0;-webkit-user-select: text;word-wrap: break-word;width: 80%;bottom: 0;"></div>
		</div>
		<van-popup v-model="show2" position="bottom" @close="showClose">
			<div style="padding: 15px;color: white;background: #24293e;">
				<van-row>
					<van-col span="16">
						<span v-if="centerType == 1">商户</span>
						<span v-if="centerType != 1">下单用户</span>
					</van-col>
					<van-col span="8" style="text-align: right;">
						<span @click="show2 = false" style="color: rgb(132, 140, 171);font-size: 14px;">关闭</span>
					</van-col>
				</van-row>
				<div style="color: #848cab;font-size: 13px;padding-top: 10px;">
					<van-row style="border-top: 1px solid rgba(133, 141, 172,0.2);padding-top: 10px;padding-bottom: 5px;">
						<van-col span="12">
							交易额
						</van-col>
						<van-col span="12" style="text-align: right;" v-if="list.status == 2 || list.status == 3">
							<van-icon name="clock-o" size="18" style="top: 62px;right: 53px;" />
							<span v-text="showTime">14:14</span>
						</van-col>
					</van-row>
				</div>
				<div style="padding: 0px 0px;color: #3eb271;font-size: 16px;">
					<van-row>
						<van-col span="12">
							<span v-text="'￥' + Number(list.unitPrice * list.numberDeals).toFixed(2)"></span>
						</van-col>
						<van-col span="12" style="text-align: right;">
							<span style="color: rgb(133, 141, 172);" v-if="list.status == 1">订单已取消</span>
							<span style="color: #47AA69;" v-if="list.status == 2">待付款</span>
							<span style="color: rgb(133, 141, 172);" v-if="list.status == 3">已付款</span>
							<span style="color: #47AA69;" v-if="list.status == 4">订单申诉中</span>
							<span style="color: rgb(133, 141, 172);" v-if="list.status == 5">确认已付款</span>
							<span style="color: rgb(133, 141, 172);" v-if="list.status == 6">已仲裁</span>
						</van-col>
					</van-row>
				</div>
			</div>
			<div style="padding-top:10px;width: 100%;background: #2c3145;" align="center">
				<div v-for="item in process" :key="item.id">
					<div style="font-size: 13px;color: rgb(133, 141, 172);" v-text="item.createTime">2019-06-28 13:42:17</div>
					<div style="font-size: 13px;color: rgb(133, 141, 172);padding-top: 10px;padding-bottom: 15px;" v-if="item.processType == 0">
						<span style="padding: 5px 15px;border-radius: 5px;background-color: #24293e;" v-text="item.remark">您已下单成功，等待卖家付款</span>
					</div>
					<div style="padding: 10px 0px;font-size: 16px;color: white;" v-if="item.processType != 0 && item.createUserId != personal.id">
						<van-row>
							<van-col span="4">
								<div align="center" style="width: 30px;height: 30px;background-color:rgb(48,198,148);color: white;border-radius: 50%;-moz-border-radius: 50%;-webkit-border-radius: 50%;">
									<span style="line-height: 30px;">商</span>
								</div>
							</van-col>
							<van-col span="20" style="text-align: left;background:#24293e;width: 75%;padding: 3px;border-bottom-left-radius: 15px;border-bottom-right-radius: 15px;border-top-right-radius: 15px;">
								<div style="margin: 5px 10px;font-size: 15px;" v-text="item.remark">
									支付宝跟微信的请提供二维码方便快速打款！收到后请及时确认！谢谢！
								</div>
							</van-col>
						</van-row>
					</div>
					<div style="padding: 10px 0px;font-size: 16px;color: white;" v-if="item.processType != 0 && item.createUserId == personal.id">
						<van-row>
							<van-col span="20">
								<div v-text="item.remark" style="background:#24293e;padding: 3px;margin: 5px 10px;text-align: right;margin-left: 10%;padding: 10px;font-size: 15px;border-bottom-left-radius: 15px;border-top-left-radius: 15px;border-bottom-right-radius: 15px;">
									支付宝跟微信的请提供二维码方便快速打款！收到后请及时确认！谢谢！
								</div>
							</van-col>
							<van-col span="4" style="float: right;">
								<div align="center" style="width: 30px;height: 30px;background-color:rgb(48,198,148);color: white;border-radius: 50%;-moz-border-radius: 50%;-webkit-border-radius: 50%;">
									<span style="line-height: 30px;">我</span>
								</div>
							</van-col>
						</van-row>
					</div>
				</div>
				<div class="isKey">
					<van-field placeholder="请再次输入你的对话" v-model.trim="msg" maxlength="50">
						<van-button slot="button" size="small" type="primary" @click="send" :loading="load">发送</van-button>
					</van-field>
				</div>
			</div>
		</van-popup>
	</div>
</template>

<script>
	import { Toast, Dialog } from 'vant';
	import { otc, mine } from './../utils/api';
	import { dateFormat } from 'vux';
	let _this;
	export default {
		data() {
			return {
				list: [],
				list2: [],
				show: false,
				show2: false,
				tiles: ['微信付款码', '支付宝付款码', '银行卡信息'],
				payTile: '',
				img: '',
				centerType: '',
				copyText: '',
				process: [], // 流程查询
				personal: [],
				msg: '',
				load: false,
				showTime: 0,
				sh: '' // 申诉标识
			}
		},
		beforeCreate() {
			_this = this;
		},
		created() {

		},
		mounted() {
			this.getOtc();
			this.getCenter();
			this.getSh();
		},
		methods: {
			initList() {
				this.myInterval = window.setInterval(() => {
					setTimeout(() => {
						this.getShowTime();
					}, 1);
				}, 1000);
			},
			getSh() { // 获取申诉信息
				otc.getIsAppeal({
					"detailId": this.$route.query.id
				}).then(res => {
					if(res.code == 200) {
						this.sh = res.data;
					}
				})
			},
			getCenter() { // 判断是不是代理
				mine.getPersonal().then(res => {
					this.personal = res.data;
					this.centerType = res.data.agency;
				})
			},
			getOtc() { // 获取详细信息
				otc.getDetail({
					"detailId": this.$route.query.id
				}).then(res => {
					this.list = res.data;
					this.getOtcPay();
				})
			},
			getOtcPay() { // 获取商户支付方式
				let uuid;
				if(this.list.typeId == 1) {
					uuid = this.list.userUuid;
				} else {
					uuid = this.list.otcUserUuid;
				}
				otc.getOtcPayType({
					"uuid": uuid
				}).then(res => {
					this.list2 = res.data;
				})
			},
			showPay(way, item) {
				if(this.list.status == 2) {
					this.show = true;
					this.payTile = this.tiles[way];
					this.img = item;
				} else {
					this.$toast({
						duration: 800,
						message: '您已完成付款，请勿重复操作！'
					});
				}
			},
			closeType() { // 确认已付款
				let id;
				if(this.payTile == '微信付款码') {
					id = 1;
				} else if(this.payTile == '支付宝付款码') {
					id = 2;
				} else if(this.payTile == '银行卡信息') {
					id = 0;
				}
				if(id == undefined) {
					this.$toast("请选择付款方式！");
					return false;
				}
				Dialog.confirm({
					message: '确认付款？',
					confirmButtonText: '付款',
					cancelButtonText: '取消付款',
					cancelButtonColor: 'white'
				}).then(() => {
					otc.getUpdateDetailPayed({
						"orderId": this.list.otcOrderId,
						"detailId": this.$route.query.id,
						"PayChain": id
					}).then(res => {
						this.$toast({
							duration: 800,
							message: res.msg
						});
						this.getOtc();
						this.show = false;
					})
				}).catch(() => {
					this.getOtc(); // 取消操作也需要重新查询
				});
			},
			closeType2() { // 确认已收款
				Dialog.confirm({
					message: '确认收款？',
					confirmButtonText: '收款',
					cancelButtonText: '取消收款',
					cancelButtonColor: 'white'
				}).then(() => {
					otc.getUpdateDetailConfirmReceipt({
						"orderId": this.list.otcOrderId,
						"detailId": this.$route.query.id
					}).then(res => {
						this.$toast({
							duration: 800,
							message: res.msg
						});
						this.getOtc();
						this.show = false;
					})
				}).catch(() => {
					this.getOtc(); // 取消操作也需要重新查询
				});
			},
			quitType() { // 取消订单
				Dialog.confirm({
					message: '确认取消订单？',
					confirmButtonText: '是',
					cancelButtonText: '否',
					cancelButtonColor: 'white'
				}).then(() => {
					otc.getUserCancelDetail({
						"detailId": this.$route.query.id,
					}).then(res => {
						this.$toast(res.msg);
						this.getOtc();
					})
				}).catch(() => {
					this.getOtc(); // 取消操作也需要重新查询
				});
			},
			clShow() { // 关闭弹窗
				this.show = false;
			},
			copyLink(type) { // 复制
				switch(type) {
					case 1:
						this.copyText = this.list.otcUserUuid;
						break;
					case 2:
						this.copyText = this.list.detailNum;
						break;
					case 3:
						this.copyText = this.img.card;
						break;
					case 4:
						this.copyText = this.list.remark;
						break;
					case 5:
						this.copyText = this.img.trueName;
						break;
					case 6:
						this.copyText = this.list.userUuid;
				}
				setTimeout(() => {
					this.$nextTick(() => { // 这里需要从 dom 中获取数据[剪切板]，因此在 vue 中必须严格保证执行顺序
						let sUserAgent = navigator.userAgent.toLowerCase();
						let bIsIpad = sUserAgent.match(/ipad/i) == "ipad";
						let bIsIphoneOs = sUserAgent.match(/iphone os/i) == "iphone os";
						window.getSelection().removeAllRanges();
						if(bIsIpad || bIsIphoneOs) {
							var copyDOM = document.querySelector('#copyText'); //要复制文字的节点
							var range = document.createRange();
							// 选中需要复制的节点
							range.selectNode(copyDOM);
							// 执行选中元素
							window.getSelection().addRange(range);
							// 执行 copy 操作
							let successful = document.execCommand('copy');
							try {
								let msg = successful ? 'successful' : 'unsuccessful';
								this.$toast("复制成功！");
							} catch(err) {
								this.$toast("复制失败！");
							}
							// 移除选中的元素
							window.getSelection().removeAllRanges();
						} else {
							const Url2 = document.getElementById("copyText").innerText;
							const oInput = document.createElement('input');
							oInput.value = Url2;
							document.body.appendChild(oInput);
							oInput.select(); // 选择对象
							document.execCommand("Copy"); // 执行浏览器复制命令
							oInput.className = 'oInput';
							oInput.style.display = 'none';
							this.$toast("复制成功！");
						}
					})
				}, 300);
			},
			ToUp() {
				this.$router.push({
					path: '/TS',
					query: {
						id: this.$route.query.id
					}
				})
			},
			getTel() { // 联系对方
				this.show2 = true;
				this.msg = '';
				this.isGetProcess();
			},
			isGetProcess() { // 流程查询
				otc.getProcess({
					"orderId": this.$route.query.id
				}).then(res => {
					if(res.code == 200) {
						this.process = res.data;
						this.initList(); // 倒计时
					} else {
						this.show2 = false;
						this.load = false;
						this.msg = '';
						this.$toast(res.msg);
					}
				})
			},
			getShowTime() { // 分秒倒计时
				let time, nowTime;
				time = String(this.list.pastDue).slice(11, 19);
				nowTime = dateFormat(new Date(), 'HH:mm:ss');
				let sTime, sNowTime = '';
				let hour = time.split(':')[0];
				let min = time.split(':')[1];
				let sec = time.split(':')[2];
				let nowHour = nowTime.split(':')[0];
				let nowMin = nowTime.split(':')[1];
				let nowSec = nowTime.split(':')[2];
				sTime = Number(hour * 3600) + Number(min * 60) + Number(sec);
				sNowTime = Number(nowHour * 3600) + Number(nowMin * 60) + Number(nowSec);
				let myTime = sTime - sNowTime;
				let m = Math.floor((myTime / 60 % 60));
				let s = Math.floor((myTime % 60));
				let showTime = `${this.padZero(m)}:${this.padZero(s)}`;
				this.showTime = showTime;
				if(this.showTime == '00:00') {
					this.show2 = false;
					this.getOtc();
				}
			},
			padZero(str) { // 自动补0
				return new RegExp(/^\d$/g).test(str) ? `0${str}` : str;
			},
			showClose() { // 监听关闭弹窗
				clearInterval(this.myInterval);
			},
			send() { // 发送消息
				if(!this.msg) {
					this.$toast("消息不能为空！");
					return false;
				}
				this.load = true;
				otc.addProcess({
					"orderId": this.list.otcOrderId,
					"detailId": this.$route.query.id,
					"remark": this.msg
				}).then(res => {
					if(res.code == 200) {
						this.isGetProcess();
						this.msg = '';
					}
					this.load = false;
					this.$toast(res.msg);
				})
			}
		},
		destroyed() {
			clearInterval(this.myInterval);
		}
	}
</script>

<style lang="less" scoped>
	.head~.overlay {
		top: 0 !important;
	}
	
	.head {
		background: transparent;
	}
	
	.overlay {
		background: #2c3145;
	}
	
	.f18 {
		font-size: 18px;
		font-weight: bold;
	}
	
	.f14 {
		font-size: 14px;
	}
	
	.f13 {
		font-size: 13px;
	}
	
	.ml20 {
		margin-left: 20px;
	}
	
	.pay {
		.pay_top {
			.pay_status {
				background: #24293e;
				padding: 10px;
				padding-top: 45px;
				.status_title {
					position: relative;
					img {
						position: absolute;
						top: 3px;
					}
					span {
						padding-left: 35px;
						font-size: 22px;
					}
				}
				.status_content {
					color: #848cab;
					padding-bottom: 10px;
				}
			}
			.pay_content {
				position: relative;
				color: #848CAB;
				background: #2c3145;
				padding: 0px 10px 10px 10px;
				.content_count {
					margin: 5px;
					padding-top: 5px;
					color: #3eb271;
					font-size: 21px;
				}
				.content_img {
					position: absolute;
					right: 20px;
					top: 50%;
					transform: translateY(-50%);
					div:first-child {
						margin-bottom: 5px;
					}
				}
			}
		}
		.pay_btm {
			padding-top: 10px;
			background: #343b52;
			.pay_order {
				padding: 10px;
				margin-bottom: 10px;
				background: #2c3145;
				.order_title {
					border-left: 2px solid #3eb271;
					padding-left: 10px;
					font-size: 16px;
					margin: 5px 0;
				}
				.order_count {
					position: relative;
					div {
						padding: 5px 0;
						span {
							display: inline-block;
						}
						.count_title {
							color: #62687e;
							width: 30%;
						}
						.count_content {
							color: #848cab;
						}
						.copy {
							position: absolute;
							right: 0;
							color: #3eb271;
							cursor: pointer;
						}
					}
				}
			}
			.pay_way {
				padding: 10px;
				background: #2c3145;
				.way_title {
					border-left: 2px solid #3eb271;
					padding-left: 10px;
					font-size: 16px;
					margin: 5px 0;
				}
				.way_content {
					display: flex;
					position: relative;
					div {
						flex: 1;
						text-align: center;
						padding: 25px 0px;
						cursor: pointer;
					}
				}
			}
		}
	}
	
	.pay_pay {
		background: #2c3145;
		.pay_title {
			text-align: center;
			background: #24293e;
			padding: 10px;
		}
		.pay_wx {
			text-align: center;
			.wx_title {
				padding: 10px;
				color: #fa4a61;
			}
			.wx_code {
				padding: 10px;
			}
		}
		.pay_bank {
			padding: 10px 20px;
			.bank_count {
				/*position: relative;*/
				.count_title {
					width: 25%;
					min-width: 60px;
					color: #848cab;
				}
				.count_content {
					position: relative;
				}
				.count_copy {
					position: absolute;
					right: 0;
					top: 0;
					color: #3eb271;
					cursor: pointer;
				}
			}
			.bank_ps {
				color: #fa4a61;
				margin-top: 10px;
			}
		}
	}
	
	/deep/ .van-icon {
		position: absolute;
		right: 15px;
		top: 15px;
	}
	
	/deep/ .isKey .van-cell {
		background: rgb(36, 41, 62);
	}
</style>